<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./../css/gsproduct.css">
<link rel="stylesheet" href="./../css/reset.css">
<script src="./../js/flexible.js"></script>

<body>
    <!-- 头部 -->
    <div class="hand">
        <a href="./index.html">&lt;</a>
        <h4>凑单品</h4>
        <a href=""><img src="./../assets/images/header_app.png" alt=""></a>
    </div>

    <div class="container">
        <div class="cityInfo">
            <div class="shop">▲京东</div>
            <div class="place">▲华北</div>
            <div class="price">免费区</div>
        </div>
        <div class="info" id="info">
            <ul>
                <li></li>
            </ul>
        </div>

        <div class="infot" id="infot">
            <ul class="infonte">
                <li></li>
            </ul>
        </div>
    </div>



    <div class="wz clear">
        <ul class="u1 clear">
            <li class="lis">
                <a href="">
                    <img src="" alt="">
                    <div></div>
                    <p></p>
                </a>
            </li>
        </ul>
        <!-- <span class="u1">
            <a href=""></a>
        </span> -->
    </div>


    <div id="footer">

        <!-- <div class="chart">
            <span class="chart-1">品牌排行</span>
            <span class="chart-2">&gt;&gt;</span>
        </div> -->
        <div class="login">
            <div class="row-1">
                <a href="">
                    <div>登入</div>
                </a>
                <a href="">
                    <div>注册</div>
                </a>
                <a href="">
                    <div>返回顶部</div>
                </a>
            </div>
            <div class="row-2">
                <p>
                    <a href="">手机APP下载</a>
                    <a href="">慢慢买手机版</a>
                    "--掌上比价平台"
                </p>
                <p>m.manmanbuy.com </p>
            </div>
            <!-- <a href=""></a> -->
        </div>
    </div>
</body>

</html>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
    let divs = document.querySelectorAll(".cityInfo div")
    let uu = document.querySelector("ul")
    let infonte = document.querySelector(".infonte")
    console.log(divs);
    Array.from(divs).forEach(div => {
        div.isClick = false;
        div.onclick = function () {
            let className = this.className
            console.log(123);
            console.log(className);
            if (className === "shop") {
                let shopDiv = this;
                this.isClick = !this.isClick

                $.ajax({
                    url: "http://chst.vip:1234/api/getgsshop"
                }).then(res => {
                    console.log(res);
                    let html = ""
                    res.result.forEach(item => {
                        html += `

                        <li shopId=${item.shopId}>${item.shopName}</li>
                        `
                    })
                    uu.innerHTML = html;

                    let lis = document.querySelectorAll("li")
                    Array.prototype.slice.call(lis).forEach(li => {
                        li.onclick = function () {
                            uu.style.display = "none";
                            shopDiv.isClick = false;
                            shopDiv.innerText = "▲" + this.innerText
                            let shopid = this.getAttribute("shopId")
                            // console.log(shop);
                            $.ajax({
                                url: "http://chst.vip:1234/api/getgsproduct",
                                data: {
                                    shopid,
                                    arerid: 0
                                }
                            }).then(res => {
                                console.log(res);
                            })
                        }
                    })
                })
            }


            if (className === "place") {
                let placeId = this
                this.onClick = !this.onClick;

                $.ajax({
                    url: "http://chst.vip:1234/api/getgsshoparea"
                }).then(res => {
                    console.log(res);
                    let html = "";
                    res.result.forEach(item => {
                        html = `
                        <li placeId=${item.areaId}>${item.areaName}</li>
                        `
                    })
                    infonte.innerHTML = html;

                })
            }


            this.innerText = this.isClick ? "▼京东" : "▲京东";
            if (this.isClick) {
                uu.style.display = "block";
            } else {
                uu.style.display = "none";
            }
        }
    })

    fetch("http://chst.vip:1234/api/getgsproduct?shopid=0&areaid=0")
        .then(body => body.json())
        .then(res => {
            console.log(res.result, 5555);
            let html = "";

            res.result.forEach(item => {
                html += `
                <li productid=${item.productId}>
                <a href="">
                   <img src="${item.productImg}">
                   <div>${item.productName}</div>
                   <p>${item.productPrice}</p>
                    </a>
                    </li>
               `
            })
            let u1 = document.querySelector(".u1")
            u1.innerHTML = html

            //点击事件
            // let lis = document.querySelector(".lis");

            // [...lis].forEach(li => {
            //     li.onclick = function () {
            //         let navId = this.getAttrbute("navId")
            //         location.href = `./sitenav.html?productid=${navId}`

            //     }
            // })
        })



</script>